iT邦幫忙

2025 iThome 鐵人賽

DAY 21
0

▍程式碼

<body>
    <!-- 未完成作答提示 -->
    <div id="custom-alert" role="alert">
        <strong>注意!</strong> 您還有未作答的題目。
    </div>

    <div class="quiz-container">
        <div id="question-navigator-wrap">
            <h5>題目導覽</h5>
            <div id="question-navigator">
            </div>
        </div>

        <!-- 作答區域 -->
        <div class="quiz-main-content">
            ...
        </div>
    </div>
    
    <script>
    if (document.getElementById('quiz-form')) {
        const totalQuestions = quizData.length;
        const navigatorDiv = document.getElementById('question-navigator');

        // 產生題目導覽按鈕
        function generateNavigator() {
            for (let i = 1; i <= totalQuestions; i++) {
                const navItem = document.createElement('div');
                navItem.classList.add('nav-item');

                const navLink = document.createElement('a');
                navLink.classList.add('nav-link-q');
                navLink.textContent = i;
                navLink.id = `nav-q-${i}`;
                navLink.setAttribute('data-q-index', i);

                // 點擊題號滾動到對應題目
                navLink.addEventListener('click', function() {
                    const targetId = `q-${i}`;
                    const targetElement = document.getElementById(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        this.style.transform = 'scale(1.1)';
                        setTimeout(() => this.style.transform = 'scale(1)', 200);
                    }
                });

                navItem.appendChild(navLink);
                navigatorDiv.appendChild(navItem);
            }
        }

        // 更新導覽按鈕狀態
        function updateNavigator(questionIndex, isAnswered, isResultMode = false, isCorrect = false) {
            const navLink = document.getElementById(`nav-q-${questionIndex}`);
            if (navLink) {
                navLink.classList.remove('answered', 'correct-result', 'incorrect-result');

                if (isAnswered) {
                    // 顯示已作答
                    navLink.classList.add('answered');
                }
            }
        }

        // 更新導覽狀態
        function setupAnswerListener() {
            const radioInputs = form.querySelectorAll('input[type="radio"]');
            radioInputs.forEach(input => {
                input.addEventListener('change', function() {
                    const qIndex = this.getAttribute('data-q-index');
                    updateNavigator(qIndex, true);
                });
            });

        }
</body>

上一篇
DAY20 - 錯題重練模式
下一篇
DAY22 - 易錯題詳情
系列文
打造你的數位圖書館:從雜亂檔案到個人化知識庫26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言